<template>
  <div class="home">home: {{ $store.state.count }}</div>
  <!-- <div>computed: {{ setCount }}</div> -->
  <div>{{ $store.state.age }}</div>
  <div>{{ $store.state.height }}</div>
  <hr>
  <div>vue2中vuex的使用辅助函数的使用</div>
  <div>count: {{ count1 }}</div>
  <div>age: {{ age1  }}</div>
  <div>height: {{ height1 }}</div>
  <hr>
  <div>count: {{ sCount }}</div>
  <hr>
  <div>vue3中vuex的使用</div>
  <div>count: {{ count }}</div>
  <div>age: {{ age  }}</div>
  <div>height: {{ height }}</div>
</template>

<script>
import { computed } from 'vue'
import { mapState, useStore } from 'vuex'
export default {
  computed: {
    // setCount () {
    //   return this.$store.state.count
    // }
    fullName () {
      return 'hejej'
    },
    ...mapState({
      count1: state => state.count,
      age1: state => state.age,
      height1: state => state.height
    })
  },
  setup () {
    const store = useStore()
    const sCount = computed(() => store.state.count)
    const storeStateFns = mapState(['count', 'age', 'height'])
    const storeState = {}
    Object.keys(storeStateFns).forEach(fnKey => {
      const fn = storeStateFns[fnKey].bind({ $store: store })
      storeState[fnKey] = computed(fn)
    })
    return {
      sCount,
      ...storeState
    }
  }
}
function abc () {
  console.log(this)
}

const foo = abc.bind({ name: 'why' })
foo()
</script>

<style>

</style>
